<template>
	<view class="main-wrap">
		<!-- 搜索条件 -->
		<!-- <view class="search-box">
			<view class="dialog-modal">
				<view class="dialog-wrapper" v-show="isShow" @click="onClose"></view>
				<transition name="drop">
					  <view class="dialog-container" v-show="isShow">
						<slot>
							<view class="content-bigbox">
								<view class="flex search-inp">
									<input class="inp" type="text" placeholder="请输入姓名或手机号">
									<view class="search">搜索</view>
								</view>
								<view class="flex content1">
									<view class="text-box te1 flex">
										<picker mode="date" :value="date || 0" start="2015-09-01" end="2020-09-01" @change="DateChange">
											<view class="picker">
												{{date}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
									<view class="text-box te2 flex">
										<picker mode="date" :value="date1 || 0" start="2015-09-01" end="2020-09-01" @change="DateChange1">
											<view class="picker">
												{{date1}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
								</view>
								<view class="flex content1">
									<view class="text-box te4 flex">
										<picker @change="channelChange" :value="index" :range="channel">
											<view class="picker">
												{{index>-1?channel[index]:'渠道来源'}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
									<view class="text-box te4 flex">
										<picker @change="levelChange" :value="index1" :range="level">
											<view class="picker">
												{{index1>-1?level[index1]:'人才级别'}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
									<view class="text-box te4 flex">
										<picker @change="postChange" :value="index2" :range="post">
											<view class="picker">
												{{index2>-1?post[index2]:'意向岗位'}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
								</view>
								<view class="flex content1">
									<view class="text-box te4 flex">
										<picker @change="ageChange" :value="index3" :range="age">
											<view class="picker">
												{{index3>-1?age[index3]:'年龄范围'}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
									<view class="text-box te5 flex">
										<picker @change="fullChange" :value="index4" :range="full">
											<view class="picker">
												{{index4>-1?full[index4]:'全职兼职'}}
											</view>
										</picker>
										<text class="lg text-gray cuIcon-triangledownfill"></text>
									</view>
								</view>
								<view class="btm-btn" @click="onClose">
									确定
								</view>
							</view>
						</slot>
					  </view>
				</transition>
			</view>
		</view> -->
		<!-- 搜索条件 -->




		<scroll-view scroll-x class="bg-white nav pos-f tab-header-wrap" scroll-with-animation :scroll-left="scrollLeft">
			<view class="flex text-center">
				<view class="flex-sub cu-item" :class="index==tabIndex?'text-blue cur':''" v-for="(item,index) in navArray" :key="index"
				 @tap="tabSelect" :data-id="index">
					<view class="tabtext">{{item.title}}</view>
				</view>
			</view>
		</scroll-view>

		<view class="content list talent-list-wrap">
			<template v-if="dataSource[tabIndex].data.length > 0">
				<!-- 图文列表 -->
				<block v-for="(item,index) in dataSource[tabIndex].data" :key="index">
					<TalentItem :item="item" :index="index" :tabnum="tabnum" :getFilterList="getFilterList" />
				</block>
				<!-- 上拉加载 -->
				<load-more :loadtext="dataSource[tabIndex].loadtext" />
			</template>
			<template v-else-if="!dataSource[tabIndex].firstload">
				<loading />
			</template>
			<template v-else>
				<!-- 无内容默认 -->
				<no-thing />
			</template>
		</view>


		<!-- <view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white flex rce">
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl action-content">
					<view class="action-title">——  请选择添加人才的方式  ——</view>
					<view class="action-content-detail grid col-3">
						<view @tap="onPressToScan('./talent_add_scan')" class="flex flex-1 action-con-item ccc">
							<image class="action-item-icon" src="../../static/icon/icon_btn_scan.png" mode="widthFix" />
							<text class="action-item-title">扫描身份证</text>
						</view>
						<view @tap="onPressToNavigateAdd('/pages/talent_pool/talent_add_upload')" class="flex flex-1 action-con-item ccc">
							<image class="action-item-icon" src="../../static/icon/icon_btn_camera.png" mode="widthFix" />
							<text class="action-item-title">上传身份证</text>
						</view>
						<view @tap="onPressToNavigateAdd('/pages/publish/talent_add_manual')" class="flex flex-1 action-con-item ccc">
							<image class="action-item-icon" src="../../static/icon/icon_btn_edit.png" mode="widthFix" />
							<text class="action-item-title">手动录入</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import TalentItem from '../../components/item/talent-item.vue';
	import loading from "../../components/common/loading.vue";
	import loadMore from "../../components/common/load-more.vue";
	import noThing from "../../components/common/no-thing.vue";
	export default {
		components: {
			TalentItem,
			loadMore,
			loading,
			noThing,
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			// console.log(e.index)
			switch (e.index) {
				case 0:
					uni.navigateTo({
						url: '/pages/publish/talent_add_manual'
					})
					break;
				case 1:
					// 打开发布页面
					this.isShow = true;
					break;
			}
		},
		data() {
			return {
				// loadmoreoffset:50,  //触发 loadmore 事件所需要的垂直偏移距离

				scrollTop: 0,
				date: '起始录入时间', //开始录入时间
				date1: '结束录入时间', //结束录入时间
				isShow: false, //控制模态框
				//渠道来源
				channel: [],
				index: -1,
				// 人才级别
				level: [],
				index1: -1,
				// 意向岗位
				post: [],
				index2: -1,
				// 年龄范围
				age: [],
				index3: -1,
				// 全职兼职
				full: [],
				index4: -1,


				token: '',
				tabnum: 0,
				navArray: [{
						id: 1,
						title: '人才库',
						api: this.ServicesApi.personnelList
					},
					{
						id: 2,
						title: '候选',
						api: this.ServicesApi.filterList
					},
					{
						id: 3,
						title: '面试中',
						api: this.ServicesApi.auditionList
					},
					{
						id: 4,
						title: '体检中',
						api: this.ServicesApi.peList
					},
					{
						id: 5,
						title: '待入职',
						api: this.ServicesApi.prepareList
					},
					{
						id: 6,
						title: '在职',
						api: this.ServicesApi.inServiceList
					},
					{
						id: 7,
						title: '离职',
						api: this.ServicesApi.leaveCompanylist
					},
					{
						id: 8,
						title: '未合作',
						api: this.ServicesApi.noCooperationList
					},
					{
						id: 9,
						title: '不可用',
						api: this.ServicesApi.delList
					},
				],
				page: 1,
				limit: 10,
				position_id: '',
				// 导航栏数据
				tabIndex: 0,
				scrollLeft: 0,
				modalName: 'show', // 'bottomModal',
				dataSource: [{
						page: 1,
						data: [],
						title: "人才库",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "候选",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "面试中",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "体检中",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "待入职",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "在职",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "离职",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "未合作",
						firstload: false,
						loadtext: "上拉加载更多",
					},
					{
						page: 1,
						data: [],
						title: "不可用",
						firstload: false,
						loadtext: "上拉加载更多",
					},
				] // 后台请求传给列表得数据
			}
		},
		onLoad(option) {
			// console.log('option---->', option)
			if (option.id) {
				this.position_id = option.id;
			}
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this._onRefresh();
			// console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 开始录入时间
			DateChange(e) {
				uni.hideKeyboard();
				this.date = e.detail.value
			},
			// 结束录入时间
			DateChange1(e) {
				uni.hideKeyboard();
				this.date1 = e.detail.value
			},
			//渠道来源
			channelChange(e) {
				uni.hideKeyboard();
				this.index = e.detail.value
			},

			// 人才级别
			levelChange(e) {
				uni.hideKeyboard();
				this.index1 = e.detail.value
			},
			// 意向岗位
			postChange(e) {
				uni.hideKeyboard();
				this.index2 = e.detail.value
			},
			// 年龄范围
			ageChange(e) {
				uni.hideKeyboard();
				this.index3 = e.detail.value
			},
			// 全职兼职
			fullChange(e) {
				uni.hideKeyboard();
				this.index4 = e.detail.value
			},


			offClose() {
				this.isShow = !this.isShow;
			},
			onClose() {
				this.isShow = false;
			},


			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},

			// 导航栏方法
			tabSelect(e) {
				let currentIndex = e.currentTarget.dataset.id;
				this.scrollTop = 0;
				if (this.tabIndex != currentIndex) {
					this.tabIndex = currentIndex;
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.tabnum = this.tabIndex;

					this.requestDataSources(this.tabIndex);
				}
			},
			// 数据请求
			async requestDataSources() {
				let index = this.tabIndex;
				let tabIndex = this.tabIndex;
				let url = this.navArray[tabIndex].api;
				// console.log('url---->', url);
				// 取token
				await this.getToken();
				// 发请求
				let data = {
					position_id: this.position_id,
					page: this.dataSource[index].page,
					limit: this.limit,
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
					let currentDataSourcesTemp = this.dataSource[tabIndex];
					// console.log(currentDataSourcesTemp.data)
					let _dataSourceTemp = res.data.data.data;
					currentDataSourcesTemp.data.push(..._dataSourceTemp)
					// console.log("shuchuyixia",currentDataSourcesTemp.data)
					currentDataSourcesTemp.firstload = true;
					currentDataSourcesTemp.data = currentDataSourcesTemp.page > 1 ? currentDataSourcesTemp.data : _dataSourceTemp;
					if (_dataSourceTemp.length < 10) {
						currentDataSourcesTemp.loadtext = '没有更多数据了';
					} else {
						currentDataSourcesTemp.loadtext = '上拉加载更多';
					}
					this.dataSource[tabIndex] = currentDataSourcesTemp;
				}
				// uni.request({
				// 	url,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		position_id: this.position_id,
				// 		token: this.token,
				// 		page: this.dataSource[index].page,
				// 		limit: this.limit,
				// 	},
				// 	success: (res) => {
				// 		if (res.data.code == 1) {
				// 			let currentDataSourcesTemp = this.dataSource[tabIndex];
				// 			// console.log(currentDataSourcesTemp.data)
				// 			let _dataSourceTemp = res.data.data.data;
				// 			currentDataSourcesTemp.data.push(..._dataSourceTemp)
				// 			// console.log("shuchuyixia",currentDataSourcesTemp.data)
				// 			currentDataSourcesTemp.firstload = true;
				// 			currentDataSourcesTemp.data = currentDataSourcesTemp.page > 1 ? currentDataSourcesTemp.data :
				// 				_dataSourceTemp;
				// 			if (_dataSourceTemp.length < 10) {
				// 				currentDataSourcesTemp.loadtext = '没有更多数据了';
				// 			} else {
				// 				currentDataSourcesTemp.loadtext = '上拉加载更多';
				// 			}
				// 			this.dataSource[tabIndex] = currentDataSourcesTemp;
				// 		}
				// 		// console.log('this.dataSource[tabIndex]---->', this.dataSource[tabIndex]);
				// 	}
				// });
			},

			// 下拉刷新
			_onRefresh() {
				this.dataSource[this.tabIndex].page = 1;
				this.requestDataSources();
				// console.log('_onRefresh---->', '_onRefresh');
			},
			// 上拉加载
			_onLoadMore() {
				let index = this.tabIndex;
				// console.log('_onLoadMore---->', index);
				if (this.dataSource[index].loadtext != "上拉加载更多") {
					return;
				}
				// 修改状态
				this.dataSource[index].loadtext = "加载中...";
				this.dataSource[index].page++;
				this.requestDataSources();
			},



			// 显示弹窗
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				// console.log(this.modalName)
			},
			// 关闭弹窗
			hideModal(e) {
				this.modalName = null
			},
			// 页面跳转
			onPressToNavigateAdd(url) {
				uni.navigateTo({
					url
				});
			},
			// 扫描
			onPressToScan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
					}
				});
			},
		},
		mounted() {
			// 请求列表数据
			this.requestDataSources();

		},
		onReachBottom() {
			// console.log('_onLoadMore---->', '_onLoadMore');
			this._onLoadMore();
		},
		onShow: function(e) {
			// #ifndef H5
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.data && currPage.data.isDoRefresh == true) {
				currPage.data.isDoRefresh = false;
				// console.log('s刷新');
				this._onRefresh();
			} else {
				//不用刷新
			}
			// #endif
			// #ifdef H5
			this._onRefresh()
			// #endif
		},
	}
</script>
<style scoped lang="stylus">
	.search-box {
		.search-inp {
			align-items: center;
			margin-bottom: 30upx;

			.inp {
				height: upx;
				width: 582upx;
				background: #F3F3F3;
			}

			.search {
				font-size: 30upx;
				color: #4A90E2;
				margin-left: 28upx;
			}
		}

		.content-bigbox {
			padding: 42upx 40upx;

			.content1 {
				justify-content space-between;
				margin-bottom: 30upx;

				.text-box {
					height: 50upx;
					width: 130upx;
					background: #F3F3F3;
					font-size: 28upx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					justify-content: space-between;
					// padding:0 8upx 0 18upx;
					padding-left: 18upx;
					align-content center;
					align-items: center;
				}

				.te1 {
					width: 282upx;

				}

				.te2 {
					width: 282upx;
					margin-right: 90upx;
				}

				.overflow {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 310upx;
				}

				.te3 {
					width: 172upx;

				}

				.te4 {
					width: 210upx;
				}

				.te5 {
					width: 210upx;
					margin-right: 230upx;
				}
			}

			.btm-btn {
				height: 80upx;
				width: 670upx;
				margin: 50upx auto 0;
				background: linear-gradient(90deg, rgba(74, 144, 226, 1) 0%, rgba(0, 102, 220, 1) 100%);
				border-radius: 2upx;
				text-align center;
				line-height 80upx;
				font-size: 32upx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.dialog-modal {
			position: absolute;
			z-index: 10000;
		}

		.dialog-wrapper {
			position: fixed;
			height: 100%;
			width: 100%;
			z-index: 5;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
		}

		.dialog-wrapper {
			background-color: #000;
			opacity: 0.2;
		}

		.dialog-container {
			position: fixed;
			z-index: 80;
			top: 0;
			left: 0;
			width: 100%;
			min-height: 344upx;
			background-color: #fff;

		}

		span.close-btn {
			padding: 5px 10px;
			float: right;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
		}
	}



	/* .no-data{
		height:200upx;
		margin:100upx auto;
		text-align:center;
		font-size:30upx;
	} */
	.load-more {
		text-align: center;
		color: #aaaaaa;
		padding-bottom: 15upx;
	}

	.talent-list-wrap {
		height: 100vh;
		-webkit-overflow-scrolling: touch;
	}

	/* .tabnum{
		margin-top:40upx;
		font-size:30upx;
	} */
	/* .tabtext{
		margin-top:40upx;
		font-size:28upx;
	} */
	.nav {
		padding: 0 20upx;
	}

	.tab-header-wrap {
		height: 92rpx;
		top: 0;
		left: 0;
		z-index: 99;
		border-bottom: 1px solid #eee;
	}

	.tabbox {
		border-bottom: 1upx solid #DBDBDB;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	}

	/* .cu-item{
		height:120upx;
		line-height:0upx;
	} */
	.content {
		padding-top: 94rpx;
		background-color: #F3F3F3;
		/* margin-top:120upx; */
	}

	.btn-item {
		margin-left: 10px;
	}

	.navItemBadge {
		font-size: 12px;
		color: #FFFFFF;
		margin-top: 15upx;
		margin-left: -5px;
		height: 20upx;
		line-height: 20upx;
		padding: 5upx;
		position: absolute;
		background: #F00;
	}

	.action-content {
		padding-top: 0;
		background-color: #FFFFFF;
	}

	.action-content .action-title {
		color: #666666;
		font-size: 30upx;
	}

	.action-content .action-content-detail {
		margin: 60upx 0;
	}

	.action-content .action-con-item {}

	.action-content .action-con-item .action-item-icon {
		width: 80upx;
		height: 80upx;
		margin-bottom: 20upx
	}
</style>
